<template>
    <div class="pagestyle">
      <div v-if="state.datatree.length == 0 && !state.addShowTtation&&state.treeSearch==''">
        <p class="tree_title">
          <span class="fw700">分站以及测点配置</span>
        </p>
        <div style="text-align: center">
          <img src="@/assets/images/nodata.png" alt="" />
          <p>暂无数据，请先配置分站</p>
          <el-button plain type="info" @click="addstationBtn">新增分站</el-button>
        </div>
      </div>
      <el-card v-if="state.treeSearch||state.datatree.length > 0||state.addShowTtation==true" style="margin-top: 10px">
        <el-row :gutter="20" style="overflow-y: auto">
          <!-- 左侧树形 -->
          <el-col :span="5">
            <div
              class="p10"
              style="
                height: calc(100vh - 190px);
                overflow-y: auto;
                overflow-x: hidden;
              "
            >
              <div class="title_r_box">
                <p class="tree_title">
                  <span>分站以及测点配置</span>
                </p>
                <el-button
                  type="primary"
                  class="w100"
                  style="margin-bottom: 10px"
                  @click="addstationBtn"
                >
                  <el-icon> <Plus /> </el-icon>新增分站
                </el-button>
                <el-input
                  clearable
                  v-model="state.treeSearch"
                  @blur="treeSearchBlur"
                  @change="treeSearchBlur"
                  placeholder="搜索"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <search />
                    </el-icon>
                  </template>
                </el-input>
              </div>
              <el-tree
                ref="pointtree"
                :data="state.datatree"
                :props="state.defaultProps"
                :highlight-current="true"
                node-key="value"
                @node-click="handleNodeClick"
                style="margin-top: 20px"
                class="custom-tree"
                :current-node-key="state.curTreeId"
                :default-expanded-keys="state.defaultExpandedNodes"
                accordion
                :filter-node-method="filterNode"
              >
                <template #default="{ node, data }">
                  <span
                    class="custom-tree-node fsc"
                    style="
                      width: 100%;
                      display: flex;
                      justify-content: space-between;
                    "
                    @mouseenter="mouseenter(data)"
                    @mouseleave="mouseleave(data)"
                  >
                    <span>
                      <svg-icon
                        v-if="data.children"
                        class-name="search-icon"
                        icon-class="wenjian"
                        style="margin-right: 5px"
                      />
                           <!-- <span v-if="node.data.pointTypeName=='测点'&&node.data.pointNum!=null" class="blue">{{ node.data.pointTypeName }}</span> -->
                              
  <!-- 
                                            <el-tooltip v-else class="box-item" effect="light" :content="node.label"
                                                placement="right">
                                  <span style="margin-left: 5px;">{{ node.label }}</span>
                                            </el-tooltip> -->
                                            <!-- <span v-if="node.data.kaichukoName=='开出口'" class="grey">{{ node.label }}</span> -->
  
                                            <span v-if="node.data.pointTypeName=='测点'&&node.data?.pointNum!=null"  class="blue">{{ node.data.pointTypeName }}</span>
                                            <span v-if="node.data.pointTypeName=='测点'&&node.data?.pointNum!=null" style="margin-left: 5px;" :title="node.data?.pointNum+'/'+node.label">{{ node.data?.pointNum }}/{{ node.label }}</span>
                                            <span v-else style="margin-left: 5px;" :title="node.label" :class="node.data.kaichukoName=='开出口'?'grey':''">{{ node.label }}</span>
                      <!-- 开出口数量 -->
                      <span v-if="data.children && data.value == 'noopen'"
                        >({{
                          data.children.length
                        }})</span
                      >
                      <!-- 分站总数 -->
                      <span
                        v-if="
                          data.children &&
                          data.value != 'nopoint' &&
                          data.value != 'noopen'
                        "
                        >({{ data.totalNum }})</span
                      >
                      <!-- 测点数量 -->
                      <span v-if="data.value == 'nopoint'"
                        >({{ data.children.length }})</span
                      >
                    </span>
                    <span>
                      <!-- 测点添加 -->
                      <svg-icon
                        v-if="data.value == 'nopoint'"
                        class-name="search-icon"
                        icon-class="addtotal"
                        @click.stop="
                          addtreePonit(data.id, node.parent.data.value)
                        "
                      />
                      <!-- 分站删除 -->
                      <svg-icon
                        v-show="data.del"
                        v-if="data.type == 'fenzhan'"
                        class-name="search-icon"
                        icon-class="delkong"
                        @click.stop="deletetree(data.value)"
                      />
                      <!-- 测点删除 -->
                      <svg-icon
                        v-show="data.del"
                        class="deleteIcon"
                        v-if="node.parent.data.value == 'nopoint'"
                        class-name="search-icon"
                        icon-class="delkong"
                        @click.stop="deletetreepoint(data.value)"
                      />
                      <!-- 开出口删除 -->
                      <svg-icon
                        v-show="data.del"
                        class="deleteIcon"
                        v-if="
                          node.parent.data.value == 'noopen' &&
                          node.data.controlPortType != null
                        "
                        class-name="search-icon"
                        icon-class="delkong"
                        @click.stop="
                          delopenClick(
                            node.data.controlPort,
                            node.parent.parent.data.value
                          )
                        "
                      />
                    </span>
                  </span>
                </template>
              </el-tree>
            </div>
          </el-col>
          <!-- 新增分站页面 -->
          <el-col :span="19" v-if="state.addShowTtation == true">
            <div
              style="
                height: calc(100vh - 240px);
                overflow-y: auto;
                overflow-x: hidden;
              "
            >
              <div class="title_r_box">
                <p class="p_btn" v-if="state.fenzhan=='编辑分站'">
                  <!-- <oneclickDelivery></oneclickDelivery> -->
                  <el-button type="primary1" @click="publishClick('分站')">一键下发</el-button>
                </p>
                <p class="title_r">
                  <span class="fz16 active">分站信息</span>
                  <!-- (若想添加分站类型/重新修改分站类型，<el-button
                                    type="primary" @click="tostationType" link>请点击跳转</el-button>) -->
                </p>
              </div>
              <el-form
                class="formBox"
                ref="formRef"
                :model="state.formData"
                :rules="state.rules"
                label-position="top"
              >
                <div class="desc_box">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item
                        label="分站编号（范围：1~255）"
                        prop="substationNumber"
                      >
                        <el-select
                          class="w100"
                          clearable
                          filterable
                          v-model="state.formData.substationNumber"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.fenzhanSelectList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="IP" prop="ipAddress">
                        <el-input
                          v-model="state.formData.ipAddress"
                          placeholder="请输入"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="端口" prop="port">
                        <el-input
                          v-model="state.formData.port"
                          placeholder="请输入"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="采集板类型" prop="acquisitionBoardType">
                        <el-select
                          class="w100"
                          clearable
                          filterable
                          v-model="state.formData.acquisitionBoardType"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.caijibanSelectList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="安装地点" prop="replaceId">
                        <el-select
                          class="w100"
                          clearable
                          filterable
                          allow-create
                          v-model="state.formData.replaceId"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.placeSelectList"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="子网掩码" prop="subnetMask">
                        <el-input
                          v-model="state.formData.subnetMask"
                          placeholder="请输入"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="网关" prop="gateway">
                        <el-input
                          v-model="state.formData.gateway"
                          placeholder="请输入"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </div>
            <div class="footer_card fbc">
              <span></span>
              <span>
                <el-button class="btn" type="info" @click="cancelClick"
                  >取消</el-button
                >
                <el-button class="btn" type="primary" @click="addClick"
                  >确定</el-button
                >
              </span>
            </div>
          </el-col>
                      <!-- 有左侧数据展示页面 -->
                      <el-col :span="19" v-if="state.nodetailShowTtation == true">
                    <div class="fdcc h100">
                        <img style="margin-left:-20px;" src="@/assets/images/nodata.png" />
                        <p style="color:rgba(0,0,0,0.5)">请在左侧点击查看</p>
                    </div>
                </el-col>
                <!-- 分站详情 -->
                <el-col :span="19" v-if="state.detailShowTtation == true">
                    <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                        <div class="title_r_box">
                            <p class="p_btn">
                                <!-- <oneclickDelivery></oneclickDelivery> -->
                                <el-button type="primary1" @click="publishClick('分站')">一键下发</el-button>
                            </p>
                            <p class="title_r fbc">
                                <span class="fz16 active">分站信息</span>
                                <div>
                                    <el-button link size="small" type="primary" @click="editstationBtn">
                                        <svg-icon class-name="search-icon" icon-class="editponit" />编辑</el-button>
                                    <el-button link size="small" type="primary"
                                        @click="addtreePonit(state.datatreeId,state.datatreeCode)">
                                        <svg-icon class-name="search-icon" icon-class="addponit" />新增测点
                                    </el-button>
                                    <!-- <el-button link size="small" type="primary">
                                        <svg-icon class-name="search-icon" icon-class="muponit" />模板</el-button> -->
                                    <el-button link size="small" type="primary"
                                        @click.stop="deletetree(state.fenzhanDetailData.id)">
                                        <svg-icon class-name="search-icon" icon-class="delpoint" />删除
                                    </el-button>
                                </div>
                            </p>
                        </div>
                        <div class="formBox">
                            <div class="desc_box">
                                <p class="drawer_sub_title">
                                    <span>
                                        <svg-icon class-name="search-icon" icon-class="map" />
                                        <!-- {{state.formData.stationPlaceName}} -->
                                         {{state.fenzhanDetailData.substationNumber+'-'+state.fenzhanDetailData.acquisitionBoardType}}
                                      </span>
                                </p>
                                <el-divider />
                                   <div class="desc_box_item">
                                     <img src="@/assets/images/keranqiti/远程控制.png" alt="">
                                     <div class="one">
                                       <!-- <span>在线</span> -->
                                       <span>{{state.fenzhanDetailData.acquisitionBoardType}}</span>
                                     </div>
                                     <div class="two">
                                      {{state.fenzhanDetailData.substationNumber+'-'+state.fenzhanDetailData.acquisitionBoardType}}
                                     </div>
                                     <div class="three">
                                      <div class="three-item">
                                        <span>自检</span>
                                        <span :style="state.fenzhanDetailData.check==true?'color:green;':'color:red;'">{{ state.fenzhanDetailData.check=='正常'?'正常':'异常' }}</span>
                                        <img v-if="state.fenzhanDetailData.check==true" src="@/assets/images/keranqiti/正常.png" alt="">
                                      </div>
                                      <div class="three-item">
                                        <span>消音</span>
                                        <span :style="state.fenzhanDetailData.mute==true?'color:green;':'color:red;'">{{ state.fenzhanDetailData.mute=='正常'?'正常':'异常' }}</span>
                                        <img v-if="state.fenzhanDetailData.mute==true" src="@/assets/images/keranqiti/正常.png" alt="">
                                      </div>
                                     </div>
                                     <div class="four">
                                       <div class="four-item">
                                        <div class="four-item-top">ip端口</div>
                                        <div class="four-item-bottom">{{ state.fenzhanDetailData.ipAddress+':'+state.fenzhanDetailData.port }}</div>
                                       </div>
                                       <div class="four-item" style="margin: 0 50px;">
                                        <div class="four-item-top">安装时刻</div>
                                        <div class="four-item-bottom">{{ state.fenzhanDetailData.isCreateTime }}</div>
                                       </div>
                                       <div class="four-item">
                                        <div class="four-item-top">安装地点</div>
                                        <div class="four-item-bottom">
                                          <span v-for="(item,index) in state.placeSelectList" :key="index">
                                            {{ state.fenzhanDetailData.replaceId==item.value?item.label:'' }}
                                          </span>
                                        </div>
                                       </div>
                                     </div>
                                   </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 新增测点页面 -->
                 <el-col :span="19" v-if="state.addShowPoint == true">
                    <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                      <div class="title_r_box">
                            <p class="p_btn">
                                <!-- <oneclickDelivery></oneclickDelivery> -->
                                <el-button type="primary1" @click="publishClick('测点')">一键下发</el-button>
                            </p>
                            <p class="title_r"><span class="fz16 hover" @click="stationBtndesc">分站信息</span>
                                <span class="fz16 active">测点信息</span></p>
                        </div>
                        <el-form
                class="formBox"
                ref="cedianformRef"
                :model="state.cedianformData"
                :rules="state.cedianrules"
                label-position="top"
              >
                <div class="desc_box">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item
                        label="测点编号"
                        prop="pointNum"
                      >
                        <el-select
                          class="w100"
                          clearable
                          filterable
                          v-model="state.cedianformData.pointNum"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.pointSelectList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="传感器名称" prop="imitateSensorName">
                        <!-- <el-select
                          class="w100"
                          clearable
                          filterable
                          v-model="state.cedianformData.imitateSensorName"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.chuanganqiSelectList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select> -->
                        <el-cascader
                          style="width: 100%"
                          clearable
                          v-model="state.cedianformData.imitateSensorName3"
                          :options="state.deviceNameList"
                          :props="state.props"
                          @change="handleCascaderChange"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="安装地点" prop="sensorPlace">
                        <el-select
                          class="w100"
                          clearable
                          filterable
                          v-model="state.cedianformData.sensorPlace"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.placeSelectList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <!-- <el-input
                          disabled
                          v-model="state.formData.stationInNum"
                          placeholder="请输入"
                        >
                        </el-input> -->
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="报警屏蔽" prop="alarmShielding">
                        <el-radio-group v-model="state.cedianformData.alarmShielding">
        <el-radio :label="0" size="large">开启</el-radio>
        <el-radio :label="1" size="large">关闭</el-radio>
      </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="故障断电" prop="faultOutage">
                        <el-radio-group v-model="state.cedianformData.faultOutage">
        <el-radio :label="0" size="large">开启</el-radio>
        <el-radio :label="1" size="large">关闭</el-radio>
      </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
  <div style="display: flex;align-items: center;">
    <span>报警配置</span>
    <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
  </div>
        </template>
        <!-- <el-form
                class="formBox"
                ref="formRef"
                :model="state.cedianformData2"
                :rules="state.cedianrules2"
                label-position="top"
              > -->
                <div class="desc_box">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item
                        label="报警模式"
                        prop="faultMode"
                      >
                        <el-select
                          class="w100"
                          clearable
                          filterable
                          v-model="state.cedianformData.faultMode"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in state.warningSelectList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="低报警值" prop="lowFaultData">
                        <el-input
                          v-model="state.cedianformData.lowFaultData"
                          placeholder="请输入"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="高报警值" prop="highFaultData">
                        <el-input
                          v-model="state.cedianformData.highFaultData"
                          placeholder="请输入"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              <!-- </el-form> -->
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span>普通断电</span>
          <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
        </template>
        <div style="margin-bottom: 10px;">
          <span>报警模式</span>
          <span style="background-color: #eceef0;padding: 5px 30px;margin-left: 10px;">{{ state.cedianformData.faultMode }}</span>
        </div>
        <vxe-table border :data="state.putongduandian">
                        <!-- <vxe-column v-for="(item,index) in state.optionsList.subtableheads" :field="item.field"
                            :title="item.title" :params="{name:item.name}" :width="item.width?item.width:''"
                            :key="index">
                        </vxe-column> -->
                        <vxe-column type="checkbox" :width="42"></vxe-column>
                        <vxe-column
                        title="开出口号"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true">
                          <template #default="{ row }">{{ row.outPort }}</template>
                          </vxe-column>
                    </vxe-table>
      </el-tab-pane>
    </el-tabs>
              </el-form>
              <div class="footer_card fbc" style="position: absolute;bottom: 0;right: 0;">
              <span></span>
              <span>
                <el-button class="btn" type="info" @click="cancelpointClick"
                  >取消</el-button
                >
                <el-button class="btn" type="primary" @click="addsubmitpointClick"
                  >确定</el-button
                >
              </span>
            </div>
                    </div>
                    </el-col>
                    <!-- 测点详情 -->
                    <el-col :span="19" v-if="state.addShowdetailPoint ==true">
                      <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                        <div class="title_r_box">
                            <p class="p_btn">
                                <!-- <oneclickDelivery></oneclickDelivery> -->
                                <el-button type="primary1" @click="publishClick('测点')">一键下发</el-button>
                            </p>
                            <p class="title_r fbc">
                                <span>
                                    <span class="fz16 hover"
                                        @click="stationBtndesc()">分站信息</span>
                                    <span class="fz16 active">测点信息</span>
                                </span>
                                <span>
                                    <el-button link size="small" type="primary" @click="editstationPointBtn('',1)">
                                        <svg-icon class-name="search-icon" icon-class="editponit" />编辑</el-button>
                                    <el-button link size="small" type="primary"
                                        @click.stop="deletetreepoint(state.cedianDetailData.id)">
                                        <svg-icon class-name="search-icon" icon-class="delpoint" />删除
                                    </el-button>
                                </span>
                            </p>
                        </div>
                        <div class="formBox">
                            <div class="desc_box">
                                <p class="drawer_sub_title">
                                    <span>
                                        <svg-icon class-name="search-icon" icon-class="map" />
                                      <span>{{ state.cedianDetailData?.sensorPlace }}</span>  
                                      </span>
                                </p>
                              <el-divider />
                          <el-row :gutter="20" class="cedianxinxi">
                            <el-col :span="5">
                                        <div class="cedianxinxi-left">
                                <img src="@/assets/images/keranqiti/测点信息.png" alt="">
                                <!-- <div class="onlines">
                                  在线
                                </div> -->
                                <div class="names">
                                  {{ state.cedianDetailData?.imitateSensorName }}
                                </div>
                                        </div>
                                    </el-col>
                                    <el-col :span="19">
                                        <div class="cedianxinxi-right">
                                          <el-row :gutter="20">
                                            <el-col :span="12">
                                              <div class="t1">测点编号</div>
                                              <div class="t2">{{ state.cedianDetailData?.pointNum }}</div>
                                            </el-col>
                                            <el-col :span="12">
                                              <div class="t1">传感器名称</div>
                                              <div class="t2">{{ state.cedianDetailData?.imitateSensorName }}</div>
                                            </el-col>
                                        </el-row>
                                        </div>
                                    </el-col>
                          </el-row>
                            </div>
                        </div>
                        <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
  <div style="display: flex;align-items: center;">
    <span>报警配置</span>
    <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
  </div>
        </template>
        <el-form
                class="formBox"
                ref="formRef"
                :model="state.cedianformData2"
                :rules="state.cedianrules2"
                label-position="top"
              >
                <div class="desc_box">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item
                      label="报警模式"
                        prop="stationCode"
                      >
                      <template #label>
                        <span style="color: rgba(62, 70, 79, 0.6);">报警模式</span>
                      </template>
                      <span style="font-weight: 700;">{{ state.cedianDetailData?.faultMode==0?'无报警':
                      state.cedianDetailData?.faultMode==1?'低报警':state.cedianDetailData?.faultMode==2?
                      '高报警':state.cedianDetailData?.faultMode==3?'高低报警':'' }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="低报警值" prop="stationTypeId">
                        <template #label>
                        <span style="color: rgba(62, 70, 79, 0.6);">低报警值</span>
                      </template>
                        <span style="font-weight: 700;">{{ state.cedianDetailData?.lowFaultData }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="高报警值" prop="stationInNum">
                        <template #label>
                        <span style="color: rgba(62, 70, 79, 0.6);">高报警值</span>
                      </template>
                   <span style="font-weight: 700;">{{ state.cedianDetailData?.highFaultData }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
      </el-tab-pane>
      <el-tab-pane name="second">
        <template #label>
          <span>普通断电</span>
          <img style="margin-left: 10px;" src="@/assets/images/keranqiti/正常.png" alt="">
        </template>
        <div style="margin-bottom: 10px;">
          <span>报警模式</span>
          <span style="background-color: #eceef0;padding: 5px 30px;margin-left: 10px;">{{ state.cedianDetailData?.faultMode=='0'?'无报警':state.cedianDetailData?.faultMode=='1'?'低报警':state.cedianDetailData?.faultMode=='2'?'高报警':state.cedianDetailData?.faultMode=='3'?'高低报警':'' }}</span>
        </div>
        <vxe-table border :data="state.putongduandian">
                        <!-- <vxe-column v-for="(item,index) in state.optionsList.subtableheads" :field="item.field"
                            :title="item.title" :params="{name:item.name}" :width="item.width?item.width:''"
                            :key="index">
                        </vxe-column> -->
                        <vxe-column type="checkbox" :width="42"></vxe-column>
                        <vxe-column
                        title="开出口号"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true">
                          <template #default="{ row }">{{ row.outPort }}</template>
                          </vxe-column>
                    </vxe-table>
      </el-tab-pane>
    </el-tabs>
                        </div>  
                      </el-col>
                       <!-- 开出口详情 -->
                      <el-col :span="19" v-if="state.addShowOpendetailShow ==true">
                    <div style="height: calc(100vh - 240px);overflow-y: auto;overflow-x: hidden;">
                      <div class="title_r_box">
                            <p class="p_btn">
                                <!-- <oneclickDelivery></oneclickDelivery> -->
                                <!-- <el-button type="primary1" @click="publishClick('测点')">一键下发</el-button> -->
                            </p>
                            <p class="title_r fbc">
                                <span>
                                    <span class="fz16 hover"
                                        @click="stationBtndesc()">分站信息</span>
                                    <span class="fz16 active">开出口信息</span>
                                </span>
                                <!-- <span>
                                    <el-button link size="small" type="primary" @click="editopenBtn">编辑</el-button>
                                    <el-button link size="small" type="primary"
                                        @click="delopenClick(state.formData2.controlPort,state.formData2.stationCode)">
                                        删除
                                    </el-button>
                                </span> -->
                            </p>
                        </div>
                        <el-form class="formBox" ref="formRef2" :model="state.formData2" :rules="state.rules2"
                        label-position="top">
  <div class="kaichuko-title">
    控制源
  </div>
  <vxe-table style="margin: 0 10px;" border :data="state.kaichukoData">
                        <!-- <vxe-column v-for="(item,index) in state.optionsList.subtableheads" :field="item.field"
                            :title="item.title" :params="{name:item.name}" :width="item.width?item.width:''"
                            :key="index">
                        </vxe-column> -->
                        <vxe-column type="checkbox" :width="42"></vxe-column>
                        <vxe-column
                        title="测点编号"
                        field="pointNum"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                         <vxe-column
                        title="测点名称"
                        field="pointNum"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                         <!-- <vxe-column
                        title="单位"
                        field="pointNum"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column> -->
                         <vxe-column
                        title="安装地点"
                        field="sensorPlace"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                         <vxe-column
                        title="报警类型"
                        field="faultMode"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                         <vxe-column
                        title="低警值"
                        field="lowFaultData"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                         <vxe-column
                        title="高警值"
                        field="highFaultData"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true"></vxe-column>
                        <!-- <vxe-column
                        v-for="(item,index) in state.kaichukoHeader"
                        :key="index"
                        :title="item.title"
                        :field="item.field"
                         :show-overflow="true" :resizable="true" :show-header-overflow="true">
                          <template #default="{ row }">{{ row[item.field] }}</template>
                          </vxe-column> -->
                          <vxe-column title="操作" width="150">
              <template #default="{row}">
                <!-- <slot name="opraCurdBtn" :row="row"></slot> -->
                 <el-button type="text" @click="cedianDetailBtn(row)">测点详情</el-button>
              </template>
            </vxe-column>
                    </vxe-table>
  </el-form>
                    </div>
                        </el-col>
        </el-row>
      </el-card>
    </div>
  </template>
  <script setup>
  import oneclickDelivery from "@/components/commonCom/oneclickDelivery";
  import { ElMessage, ElMessageBox } from "element-plus";
  import axios from "@/utils/request";
  import { ref } from "vue";
  import { useRoute } from "vue-router";
  import { set } from "lodash";
  const { proxy } = getCurrentInstance();
  const route = useRoute();
  const state = reactive({
    datatree: [],
    leftTreeDetail: {}, //左侧树形点击后数据
    props: {
      value: "value",
      label: "label",
      children: "childs",
    },
    deviceNameList: [], //测点信息，传感器名称
    defaultProps: {
      children: "children",
      label: "label",
    }, //左侧树形
    formData: {},
    rules: {},
    cedianformData: {}, //新增测点页面
    cedianrules: {
      pointNum: [
        { required: true, message: "请选择测点编号", trigger: "change" },
      ],
      imitateSensorName: [
        { required: true, message: "请选择传感器名称", trigger: "change" },
      ],
      sensorPlace: [
        { required: true, message: "请选择安装地点", trigger: "change" },
      ],
      alarmShielding: [
        { required: true, message: "请选择报警屏蔽", trigger: "change" },
      ],
      faultOutage: [
        { required: true, message: "请选择故障断电", trigger: "change" },
      ],
  
      faultMode: [
        { required: true, message: "请选择报警模式", trigger: "change" },
      ],
      lowFaultData: [
        { required: true, message: "请输入低报警值", trigger: "blur" },
      ],
      highFaultData: [
        { required: true, message: "请输入高报警值", trigger: "blur" },
      ],
    },
    cedianformData2: {}, //新增测点页面tabs报警配置
    cedianrules2: {},
    curTreeId: "",
    defaultExpandedNodes: [],
    treeSearch: "",
    ationNosList: [],
    fenzhan: "新增分站", //提交表单用于判断是新增还是编辑
    cedian: "新增测点", //提交表单用于判断是新增还是编辑
    fenzhanSelectList: [], //分站编号列表
    placeSelectList: [], //安装地点列表
    pointSelectList: [], //测点编号列表
    chuanganqiSelectList: [], //传感器名称列表
    fenzhanDetailData: {}, //分站详情数据
    cedianDetailData: {}, //测点详情数据
    caijibanSelectList: [
      { label: "电流型采集板(16)测点", value: "1" }, //1:电流型采集板(16)测点
      { label: "485型采集板(256)测点", value: "2" }, //2:485型采集板(256)测点
    ], //采集板列表
    warningSelectList: [
      { label: "无报警", value: "0" },
      { label: "低报警", value: "1" },
      { label: "高报警", value: "2" },
      { label: "高低报警", value: "3" },
    ], //报警模式列表
    addressInfoList: [],
    putongduandian: [
      { outPort: "1" },
      { outPort: "2" },
      { outPort: "3" },
      { outPort: "4" },
    ], //普通断电测点列表
    addShowTtation: false, //新增分站页面
    nodetailShowTtation: false, //有左侧数据展示页面
    detailShowTtation: false, //分站详情页面
    addShowPoint: false, //新增测点页面
    activeName: "first", //tab切换
    addShowdetailPoint: false, //新增测点详情页面
    addShowOpendetailShow: false, //开出口详情页面
    kaichukoData: [], //开出口列表
  });
  //新增分站
  const addstationBtn = () => {
    state.fenzhan = "新增分站";
    state.formData = {};
    state.fenzhanDetailData = {};
    state.leftTreeDetail = {};
    state.addShowPoint = false;
    state.addShowTtation = true;
    state.detailShowTtation = false;
    state.addShowdetailPoint = false;
    state.nodetailShowTtation = false;
    state.addShowdetailPoint = false;
  };
  //左侧树形点击
  const handleNodeClick = (data, node, event) => {
    state.leftTreeDetail = data;
    console.log(data, "data");
    console.log(node, "node");
    if (data.type == "fenzhan") {
      axios.post("/gas/substation/list", { id: data.value }).then((res) => {
        if (res.rows) {
          state.fenzhanDetailData = res.rows[0];
          state.detailShowTtation = true;
          state.addShowTtation = false;
          state.nodetailShowTtation = false;
          state.addShowPoint = false;
          state.addShowOpenShow = false;
          state.addShowOpendetailShow = false;
          state.addShowdetailPoint = false;
          // state.cutValueListyou = false;
        }
      });
    } else if (data.pointTypeName == "测点") {
      axios.get("/system/point/" + data.value).then((res) => {
        state.cedianDetailData = res.data;
        state.addShowdetailPoint = true;
        state.detailShowTtation = false;
        state.addShowTtation = false;
        state.nodetailShowTtation = false;
        state.addShowPoint = false;
        state.addShowOpenShow = false;
        state.addShowOpendetailShow = false;
        // state.cutValueListyou = false;
      });
    } else if (data.kaichukoName == "开出口") {
      state.activeName = "first";
      addOpenBtn(data.value, node.parent.parent.data.value);
    }
  };
  function filterNode(value, data) {
    if (!value) return true;
    return data.label.includes(value);
  }
  //鼠标移入显示删除按钮
  const mouseenter = (data) => {
    // console.log(data, "data");
    data.del = true;
  };
  //鼠标移出隐藏删除按钮
  const mouseleave = (data) => {
    data.del = false;
  };
  //左侧树形搜索
  const treeSearchBlur = () => {
    let obj = {};
    if (state.treeSearch) {
      obj.substationNumber = state.treeSearch;
    } else {
      obj = {};
    }
    state.addShowOpenShow = false;
    state.addShowOpendetailShow = false;
    state.addShowdetailPoint = false;
    state.addShowPoint = false;
    state.addShowTtation = false;
    state.detailShowTtation = false;
    getLeftTreeList(obj);
  };
  //一键下发
  const publishClick = (val) => {
    if (val == "分站") {
      axios
        .post("/gas/substation/substationLssue", {
          id: state.leftTreeDetail.value,
        })
        .then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg);
          }
        });
    } else if (val == "测点") {
      axios
        .post("/system/point/pointLssue", {
          id: state.leftTreeDetail.value,
        })
        .then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg);
          }
        });
    }
  };
  //取消分站信息提交
  const cancelClick = () => {
    state.addShowPoint = false;
    state.addShowTtation = false;
    state.addShowdetailPoint = false;
    state.nodetailShowTtation = false;
    state.addShowdetailPoint = false;
    state.detailShowTtation = true;
    state.formData = {};
  };
  //新增分站信息提交
  const addClick = () => {
    console.log(state.formData, "formData");
    let fenzhanUrl = "/gas/substation/add";
    if (state.fenzhan == "新增分站") {
      fenzhanUrl = "/gas/substation/add";
    } else if (state.fenzhan == "编辑分站") {
      fenzhanUrl = "/gas/substation/update";
    }
    if(state.formData.acquisitionBoardType){
      state.formData.acquisitionBoardType=Number(state.formData.acquisitionBoardType)
    }
    axios.post(fenzhanUrl, state.formData).then((res) => {
      getLeftTreeList({});
      getSelectList();
      setTimeout(() => {
        state.nodetailShowTtation = false;
        state.addShowTtation = false;
        state.addShowPoint = false;
        state.addShowdetailPoint = false;
        state.addShowOpendetailShow = false;
        state.detailShowTtation = true;
        state.fenzhanDetailData = state.formData;
        state.treeSearch = "";
      }, 500);
    });
  };
  //分站信息中编辑按钮
  const editstationBtn = () => {
    getSelectList();
    state.fenzhan = "编辑分站";
    state.formData = state.fenzhanDetailData;
    state.addShowPoint = false;
    state.addShowTtation = true;
    state.detailShowTtation = false;
    state.addShowdetailPoint = false;
    state.nodetailShowTtation = false;
    state.addShowdetailPoint = false;
  };
  //分站信息中删除按钮
  const deletetree = (datatreeCode) => {
    ElMessageBox.confirm("确定要删除吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        axios.delete("/gas/substation/" + datatreeCode).then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg);
            getLeftTreeList({});
            state.addShowTtation = false;
            state.detailShowTtation = false;
            state.nodetailShowTtation = true;
            state.addShowPoint = false;
            state.addShowOpenShow = false;
            state.addShowOpendetailShow = false;
            state.addShowdetailPoint = false;
            // state.cutValueListyou = false;
          } else {
            ElMessage.error(res.msg);
          }
        });
      })
      .catch(() => {
        proxy.$modal.msgWarning("删除取消");
      });
  };
  //新增测点
  const addtreePonit = (datatreeId, datatreeCode) => {
    getSelectList();
    state.cedian = "新增测点";
    state.cedianDetailData = {};
    state.cedianformData = {};
    state.addShowPoint = true;
    state.addShowTtation = false;
    state.detailShowTtation = false;
    state.addShowdetailPoint = false;
    state.nodetailShowTtation = false;
    state.addShowdetailPoint = false;
  };
  //测点信息取消按钮
  const cancelpointClick = () => {
    state.addShowPoint = false;
    state.addShowTtation = false;
    state.detailShowTtation = false;
    state.nodetailShowTtation = false;
    state.addShowdetailPoint = false;
    state.addShowdetailPoint = true;
  
    state.cedianformData = {};
  };
  //测点信息提交按钮
  let cedianformRef = ref();
  const addsubmitpointClick = () => {
    cedianformRef.value.validate((valid) => {
      if (valid) {
        if (
          Number(state.cedianformData.lowFaultData) >
          Number(state.cedianformData.highFaultData)
        ) {
          proxy.$modal.msgWarning("低报警值不能大于高报警值");
        } else {
          state.cedianformData.substationId = state.fenzhanDetailData.id;
          state.cedianformData.gasBaseMeasurePointOutageList = [
            { outPort: 1 },
            { outPort: 2 },
            { outPort: 3 },
            { outPort: 4 },
          ];
          if (state.cedian == "新增测点") {
            axios.post("/system/point", state.cedianformData).then((res) => {
              if (res.code == 200) {
                ElMessage.success(res.msg);
                getLeftTreeList({});
                getSelectList();
                setTimeout(() => {
                  state.activeName = "first";
                  state.addShowPoint = false;
                  state.addShowTtation = false;
                  state.detailShowTtation = false;
                  state.addShowdetailPoint = false;
                  state.nodetailShowTtation = false;
                  state.addShowdetailPoint = true;
                  state.cedianformData = {};
                }, 100);
              }
            });
          } else if (state.cedian == "编辑测点") {
            axios.put("/system/point", state.cedianformData).then((res) => {
              if (res.code == 200) {
                ElMessage.success(res.msg);
                getLeftTreeList({});
                getSelectList();
                setTimeout(() => {
                  state.activeName = "first";
                  state.addShowPoint = false;
                  state.addShowTtation = false;
                  state.detailShowTtation = false;
                  state.addShowdetailPoint = false;
                  state.nodetailShowTtation = false;
                  state.addShowdetailPoint = true;
                  state.cedianDetailData = state.cedianformData;
                  state.cedianformData = {};
                }, 100);
              }
            });
          }
        }
      }
    });
  };
  // 查看分站详情
  const stationBtndesc = (stationCode) => {
    state.addShowPoint = false;
    state.addShowTtation = false;
    // state.nodetailShowTtation = true;
    state.addShowdetailPoint = false;
    state.addShowOpendetailShow = false;
    state.detailShowTtation = true;
    state.formData = {};
  };
  // 编辑测点信息
  const editstationPointBtn = (stationCode, type) => {
    getSelectList();
    state.cedian = "编辑测点";
    state.cedianformData = state.cedianDetailData;
    state.deviceNameList.forEach((item) => {
      if (item.value == state.cedianDetailData?.imitateType) {
        item.childs?.forEach((item1) => {
          //js截取两个 / 之间的字符串
          let str;
          if (state.cedianDetailData.imitateType == 0) {
            str = state.cedianDetailData.imitateSensorName.split("/")[1];
          } else if (state.cedianDetailData.imitateType == 1) {
            str =
              state.cedianDetailData.imitateSensorName.split("/")[1] +
              "/" +
              state.cedianDetailData.imitateSensorName.split("/")[2];
          }
          console.log(str, "formDatastr");
          if (item1.label == str) {
            if (item1.childs) {
              item1.childs?.forEach((item2) => {
                state.cedianformData.imitateSensorName3 = [
                  item.value,
                  item1.value,
                  item2.value,
                ];
              });
            } else {
              state.cedianformData.imitateSensorName3 = [item.value, item1.value];
            }
          }
        });
        console.log(state.deviceNameList, "formDatadeviceNameList");
        console.log(
          state.cedianformData.imitateSensorName3,
          "formDataimitateSensorName3"
        );
      }
    });
    state.addShowTtation = false;
    state.nodetailShowTtation = false;
    state.detailShowTtation = false;
    state.addShowdetailPoint = false;
    state.addShowPoint = true;
    state.formData = {};
  };
  // 删除测点信息
  const deletetreepoint = (datatreeId) => {
    ElMessageBox.confirm("确定要删除吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        console.log(state.cedianDetailData, "formData");
        axios.delete("/system/point/" + datatreeId).then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg);
            getLeftTreeList({});
            state.addShowTtation = false;
            state.detailShowTtation = false;
            state.addShowPoint = false;
            state.addShowOpenShow = false;
            state.addShowOpendetailShow = false;
            state.addShowdetailPoint = false;
            state.nodetailShowTtation = true;
            // state.cutValueListyou = false;
          } else {
            ElMessage.error(res.msg);
          }
        });
        // axios.post('/point/delete?pointId=' + val).then(res => {
        //     proxy.$modal.msgSuccess(res.msg);
        //     getsider()
        // })
      })
      .catch(() => {
        proxy.$modal.msgWarning("删除取消");
      });
  };
  //开出口详情
  const addOpenBtn = (id, substationId) => {
    axios
      .post("/system/point/getPointDetailByOutId", {
        outId: id,
        substationId: substationId,
      })
      .then((res) => {
        if (res.rows) {
          state.kaichukoData = res.rows;
          state.addShowdetailPoint = false;
          state.addShowPoint = false;
          state.addShowTtation = false;
          state.nodetailShowTtation = false;
          state.detailShowTtation = false;
          state.addShowOpenShow = false;
          state.addShowOpendetailShow = true;
          // state.cutValueListyou = false;
        }
      });
  };
  //开出口查看测点详情
  const cedianDetailBtn = (row) => {
    axios.get("/system/point/" + row.id).then((res) => {
      if (res.data) {
        state.leftTreeDetail.value = row.id; //用于一键下发
        state.cedianDetailData = res.data;
        state.addShowOpenShow = false;
        state.addShowOpendetailShow = false;
        state.addShowPoint = false;
        state.addShowTtation = false;
        state.nodetailShowTtation = false;
        state.detailShowTtation = false;
        state.addShowdetailPoint = true;
        // state.cutValueListyou = false;
      }
    });
  };
  //左侧树形列表
  const getLeftTreeList = (obj) => {
    let arr = [];
    let pointChildren = [];
    let outChildren = [];
    axios.post("/gas/substation/subStationTree", obj).then((res) => {
      if (res.data.length > 0) {
        res.data.forEach((item) => {
          if (item.pointAndOutVOList) {
            item.pointAndOutVOList.forEach((item1) => {
              pointChildren = item1.pointList.map((item2) => {
                return {
                  label: item2.imitateSensorName,
                  value: item2.id,
                  pointNum: item2.pointNum,
                  substationId: item2.substationId,
                  pointTypeName: "测点",
                };
              });
              outChildren = item1.outList.map((item2) => {
                return {
                  label: item2.out,
                  value: item2.id,
                  kaichukoName: "开出口",
                };
              });
            });
          }
          arr.push({
            label: item.substationNumber + "-" + "分站",
            value: item.id,
            // id: item.id,
            totalNum: pointChildren.length + outChildren.length,
            type: "fenzhan",
            children: [
              {
                label: "测点",
                value: "nopoint",
                id: "nopoint",
                children: pointChildren,
              },
              {
                label: "开出口",
                value: "noopen",
                id: "noopen",
                children: outChildren,
              },
            ],
          });
          state.datatree = arr;
          state.nodetailShowTtation = true;
        });
      } else if (res.data.length == 0) {
        state.datatree = res.data;
        state.nodetailShowTtation = true;
      }
    });
  };
  const handleCascaderChange = (value, selectedOptions) => {
    // state.cedianformData.imitateSensorName
    state.deviceNameList.forEach((item) => {
      if (item.value == value[0]) {
        item.childs?.forEach((item1) => {
          if (item1.value == value[1]) {
            if (item1.childs) {
              item1.childs?.forEach((item2) => {
                state.cedianformData.imitateSensorName =
                  item.label + "/" + item1.label + "/" + item2.label;
              });
            } else {
              state.cedianformData.imitateSensorName =
                item.label + "/" + item1.label;
            }
          }
        });
      }
    });
    state.cedianformData.imitateSensorId = value[value.length - 1]; //传感器id
    state.cedianformData.imitateType = value[0]; //模拟量0，开关量1
    console.log(
      state.cedianformData.imitateSensorName,
      "state.cedianformData.imitateSensorName"
    );
    console.log(
      state.cedianformData.imitateSensorId,
      "state.cedianformData.imitateSensorId"
    );
    console.log(
      state.cedianformData.imitateType,
      "state.cedianformData.imitateType"
    );
    console.log(state.deviceNameList, "state.deviceNameList");
  };
  const handleClick = (val) => {};
  //下拉框内容
  const getSelectList = () => {
    //分站编号
    axios.get("/gas/substation/getSubstationNum", {}).then((res) => {
      state.fenzhanSelectList = res.data.map((item) => {
        return { label: item, value: item };
      });
    });
    //测点编号
    axios
      .post("/system/point/getSubstationPointNum", {
        substationId: state.fenzhanDetailData.id,
      })
      .then((res) => {
        state.pointSelectList = res.data.map((item) => {
          return { label: item, value: item };
        });
      });
    //传感器名称
    //模拟量
    let arr = [
      {
        label: "模拟量",
        value: "0",
        childs: [],
      },
    ];
    let childs = [];
  
    axios.post("/imitate/sensor/list", {}).then((res) => {
      if (res.rows) {
        // state.deviceNameList = res.rows.map(item => { return { label: item.name, value: item.id } })
        res.rows.forEach((item, index) => {
          arr[0].childs.push({
            // label: item.deviceName + "/" + item.primaryIndex,
            label: item.deviceName,
            value: String(index),
            name: item.deviceName,
            childs: [],
          });
          arr[0].childs[index].childs.push({
            label: item.subIndex,
            value: item.id,
          });
          // if (item.gasBaseExFactorySpecificImitateSubIndexList) {
          //   childs = [];
          //   item.gasBaseExFactorySpecificImitateSubIndexList.forEach(
          //     (item1, index1) => {
          //       childs.push({
          //         label: item1.subIndexName + "/" + item1.number,
          //         value: item1.id,
          //         items: item1,
          //         name: item1.subIndexName,
          //         // id: item1.id,
          //       });
          //     }
          //   );
          //   arr[0].childs[index].childs = childs;
          // }
        });
        state.deviceNameList.push(arr[0]);
      }
    });
    //开关量
    let arr2 = [
      {
        label: "开关量",
        value: "1",
        childs: [],
      },
    ];
    let childs2 = [];
    axios.post("/switch/sensor/list", {}).then((res) => {
      if (res.rows) {
        // state.deviceNameList = res.rows.map(item => { return { label: item.name, value: item.id } })
        res.rows.forEach((item, index) => {
          arr2[0].childs.push({
            label: item.deviceName,
            value: String(index),
            name: item.deviceName,
            childs: [],
          });
          arr2[0].childs[index].childs.push({
            label: item.subIndex,
            value: item.id,
          });
          // if (item.specificSwitchSubIndexList) {
          //   childs2 = [];
          //   item.specificSwitchSubIndexList.forEach((item1, index1) => {
          //     childs2.push({
          //       label: item1.subIndexName + "/" + item1.number,
          //       value: item1.id,
          //       items: item1,
          //       name: item1.subIndexName,
          //       // id: item1.id,
          //     });
          //   });
          //   arr2[0].childs[index].childs = childs2;
          // }
        });
        state.deviceNameList.push(arr2[0]);
      }
    });
    // axios
    //   .post("/imitate/sensor/list", {
    //     pageNum: 1,
    //     pageSize: 1000,
    //   })
    //   .then((res) => {
    //     state.chuanganqiSelectList = res.rows.map((item) => {
    //       return { label: item.deviceName, value: item.deviceName };
    //     });
    //   });
  
    //安装地点
    axios
      .post("/gas/place/list", {
        pageNum: 1,
        pageSize: 1000,
      })
      .then((res) => {
        if (res.rows) {
          state.placeSelectList = res.rows.map((item) => {
            return { label: item.address, value: String(item.id) };
            // return { label: item.address, value: item.address };
          });
        }
      });
  };
  function getrouterCedian() {
    console.log(route.query.id, "router");
    axios.get("/system/point/" + route.query.id).then((res) => {
      state.cedianDetailData = res.data;
      state.addShowOpenShow = false;
      state.addShowOpendetailShow = false;
      state.addShowPoint = false;
      state.addShowTtation = false;
      state.nodetailShowTtation = false;
      state.detailShowTtation = false;
      state.addShowdetailPoint = true;
      // state.cutValueListyou = false;
    });
  }
  onMounted(() => {
    //获取路由传递过来的参数
    console.log(route.query.id, "id");
    setTimeout(() => {
      if (route.query.id) {
        getrouterCedian();
      }
    }, 200);
    getSelectList(); //获取下拉框信息
    getLeftTreeList({}); //获取左侧树形列表
  });
  </script>
  <style scoped lang="scss">
  .title_r_box {
    padding-top: 1px;
    position: sticky;
    z-index: 3;
    top: 0px;
    background: #fff;
  }
  .title_r {
    border-radius: 4px 4px 0 0;
    padding: 15px 10px;
    font-size: 14px;
    color: rgba(52, 76, 107, 0.6);
    background-color: rgba(247, 247, 247, 1);
    margin: 0;
  
    span {
      margin-right: 10px;
  
      &.active {
        color: rgba(64, 158, 255, 1);
        position: relative;
  
        &::before {
          position: absolute;
          content: "";
          left: 50%;
          transform: translateX(-50%);
          bottom: -15px;
          width: 100%;
          height: 2px;
          background-color: rgba(64, 158, 255, 1);
        }
      }
    }
  }
  .p_btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
  }
  .formBox {
    border: 1px solid rgba(247, 247, 247, 1);
    padding-bottom: 10px;
  }
  .desc_box {
    padding: 10px;
    background: rgba(91, 109, 128, 0.04);
    margin: 10px 10px 0;
  }
  .footer_card {
    margin-top: 20px;
  
    .btn {
      margin: 0 5px;
    }
  }
  .desc_box_item {
    text-align: center;
    .one {
      margin: 10px 0;
      span:nth-child(1) {
        font-size: 12px;
        color: #fff;
        padding: 1px 5px;
        background-color: #67c23a;
        border-radius: 3px;
      }
      span:nth-child(2) {
        font-size: 12px;
        color: #fff;
        padding: 1px 5px;
        background-color: #358cf0;
        border-radius: 3px;
        margin-left: 8px;
      }
    }
    .two {
      font-weight: 700;
      margin: 20px 0;
    }
    .three {
      .three-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        span:nth-child(2) {
          margin: 0 10px;
        }
      }
    }
    .four {
      margin-bottom: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      .four-item {
        font-size: 14px;
        .four-item-top {
          color: rgba(62, 70, 79, 0.6);
          // text-align: left;
        }
        .four-item-bottom {
          margin-top: 5px;
          color: rgba(62, 70, 79, 1);
        }
      }
    }
  }
  .demo-tabs {
    padding: 10px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    width: 0;
    height: 0;
  }
  .cedianxinxi {
    .cedianxinxi-left {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .onlines {
        width: 40px;
        font-size: 12px;
        background-color: #6cc441;
        color: #fff;
        padding: 2px 0;
        margin-top: 10px;
        border-radius: 5px;
      }
      .names {
        font-size: 14px;
        font-weight: 700;
        margin-top: 20px;
      }
    }
    .cedianxinxi-right {
      font-size: 14px;
      margin-top: 40px;
      .t1 {
        color: rgba(62, 70, 79, 0.6);
      }
      .t2 {
        margin-top: 10px;
      }
    }
  }
  .kaichuko-title {
    margin: 10px 0 10px 10px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    &:before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 15px;
      background-color: #409eff;
      margin-right: 5px;
    }
  }
  </style>
  
  <style scoped lang="scss">
  .blue {
    padding: 0 5px;
    color: rgba(42, 130, 228, 1);
    background: rgba(42, 130, 228, 0.1);
    border: 1px solid rgba(42, 130, 228, 0.87);
  }
  .grey {
    padding: 0px 10px;
    color: rgba(184, 184, 184, 1);
    background: rgba(184, 184, 184, 0.1);
    border: 1px solid rgba(184, 184, 184, 0.87);
  }
  </style>
  